<template>
  <div class="food">
    <h2>菜名：{{ data.name }}</h2>
    <h3>价格：{{ data.price }}</h3>
    <h4>开业大酬宾打{{ discount }}折</h4>
    <button @click="changeParentData">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    // props: ['data'],  // 不会校验数据类型
    data: {
      type: Object,
      // 如果是复杂类型，要写成函数
      // 箭头函数返回空对象，要用()包起来，否则返回undefined，因为不写()直接写{}会产生歧义，比如返回空数组就不用{}包起来，因为不会产生歧义
      default: () => ({}),
    },
    discount: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    changeParentData() {
      // console.log(this.discount);
      // 按照单向数据流->简单数据类型和复杂数据类型都不能修改
      // this.discount = 1;
      // this.data = { name: 新菜, price: 12 };
      // 例外：复杂数据类型可以局部修改，因为没有改变引用地址
      // this.data.name = '鱼香肉丝'
      this.$emit("change-discount", 2,1);
    },
  },
};
</script>

<style scoped>
.food {
  margin: 0 auto;
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  background-color: peachpuff;
  border-radius: 10px;
}
</style>